<template>
	<div>
		<p class="t">总共：{{ list.length }}组件</p>
		<a
			v-for="item in list"
			:key="item.hash"
			:href="item.hash"
			:class="{ active: activeHash === item.hash }"
			>{{ item.label }}</a
		>
	</div>
</template>
<script>
export default {
	data() {
		return {
			activeHash: "#swiper",
			list: [
				{
					hash: "#radio",
					label: "1、单选框 radio",
				},
				{
					hash: "#checkBox",
					label: "2、多选框 checkBox",
				},
				{
					hash: "#input",
					label: "3、输入框 input",
				},
				{
					hash: "#inputNumber",
					label: "4、计数器 inputNumber",
				},
				{
					hash: "#select",
					label: "5、选择器 select",
				},
				{
					hash: "#switch",
					label: "6、开关 switch",
					ref: "switch",
				},
				{
					hash: "#avatarList",
					label: "7、头像列表 avatarList",
				},
				{
					hash: "#countUp",
					label: "8、数字动画 countUp",
				},
				{
					hash: "#slider",
					label: "9、滑块 slider",
				},
				{
					hash: "#timePicker",
					label: "10、时间选择器 timePicker",
				},
				{
					hash: "#upload",
					label: "11、上传头像 upload",
				},
				{
					hash: "#message",
					label: "12、消息提示 message",
				},
				{
					hash: "#notification",
					label: "13、消息通知 notification",
				},
				{
					hash: "#messageBox",
					label: "14、消息弹窗 messageBox",
				},
				{
					hash: "#pagination",
					label: "15、分页 pagination",
				},
				{
					hash: "#progress",
					label: "16、进度条 progress",
				},
				{
					hash: "#tooltip",
					label: "17、文字提示 tooltip",
				},
				{
					hash: "#loading",
					label: "18、加载中 loading",
				},
				{
					hash: "#suspendBall",
					label: "19、悬浮球 suspendBall",
				},
				{
					hash: "#swiper",
					label: "20、轮播图 swiper",
				},
				{
					hash: "#imgCode",
					label: "21、图形验证码",
				},
			],
		};
	},
	watch: {
		$route(nv) {
			this.activeHash = nv.hash;
		},
	},
	created() {
		this.activeHash = this.$route.hash;
	},
	methods: {
		scrollInit() {},
	},
};
</script>
<style lang="less" scoped>
.t {
	color: @main-color;
	font-weight: bold;
	margin-bottom: 6px;
}
a {
	display: block;
	padding: 0 0 6px;
	&:hover,
	&.active {
		color: @main-color;
		font-weight: bold;
	}
}
</style>
